<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: antiquewhite">Header</el-header>
      <el-container>
        <el-aside width="200px">
          <el-col>
            <el-menu
              router
              default-active="activeUrl"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="/seller/goods">
                <el-icon>
                  <setting />
                </el-icon>
                <span>Navigator Four</span>
              </el-menu-item>
              <el-menu-item index="/seller/order">
                <el-icon>
                  <setting />
                </el-icon>
                <span>Navigator Four</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main style="background-color: azure">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const activeUrl = ref("/seller");

router.afterEach((to) => {
  activeUrl.value = to.path;
});

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style scoped></style>
